<script lang="ts">
	import { imageBasePath, variables } from '$store/g';
	import RetinaBgImage from '$lib/RetinaBgImage.svelte';
	
</script>

<div class="solution-part">
	<div class="pl-[38px] pt-[102px]">
		<div class="solution-part-title">{$variables.siteName}比伶比俐商城</div>
		<div class="solution-part-sub-title">
			全渠道小程序电商解决方案，助力品牌数字化升级
		</div>
		<div class="pt-4 grid grid-flow-col grid-cols-4  text-primary text-[14px]">
			<div><em class="iconfont icon-check-circle w-4 h-4 mr-3" />功能齐全</div>
			<div><em class="iconfont icon-check-circle w-4 h-4 mr-3" />资金安全</div>
			<div><em class="iconfont icon-check-circle w-4 h-4 mr-3" />免费入驻</div>
		</div>
		<div class="pt-[39px]">
			<a
				class="rounded-[37.5px] px-4 py-2 text-xl bg-primary text-white flex justify-center items-center w-36 h-16"
				href="void:(0)">免费体验</a
			>
		</div>
	</div>
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution.png"
		img2xSrc="{$imageBasePath}/solution@2x.png"
		alt="solution"
		classes="w-[621px] h-[460px] bg-no-repeat bg-cover bg-center"
	/>
</div>
<div class="solution-part">
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution-multiple-platform-mini-app.png"
		img2xSrc="{$imageBasePath}/solution-multiple-platform-mini-app@2x.png"
		alt="solution-multiple-platform-mini-app"
		classes="w-[600px] h-[468px] bg-no-repeat bg-cover bg-center"
	/>
	<div class="pl-[80px] pt-[153px]">
		<div class="solution-part-title">多平台小程序，扩大你的私域流量池</div>
		<div class="solution-part-sub-title">
			链接微信、支付宝、抖音等多个平台，快速创建小程序，不同渠道可精细化运营，全方位引流至微信私域
		</div>
	</div>
</div>
<div class="solution-part">
	<div class="pt-[153px]">
		<div class="solution-part-title">多种经营模式，选择更匹配你的</div>
		<div class="solution-part-sub-title">
			品牌自营、平台、经销商三类模式，满足市面上典型的业务模型，让你的经营更契合
		</div>
	</div>
	<RetinaBgImage
			imgSrc="{$imageBasePath}/solution-business-mode.png"
			img2xSrc="{$imageBasePath}/solution-business-mode@2x.png"
			alt="solution-business-mode"
			classes="w-[667px] h-[447px] bg-no-repeat bg-cover bg-center"
		/>
</div>
<div class="solution-part">
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution-promotion.png"
		img2xSrc="{$imageBasePath}/solution-promotion@2x.png"
		alt="solution-promotion"
		classes="w-[653px] h-[517px] bg-no-repeat bg-cover bg-center"
	/>
	<div class="pl-[83px] pt-[153px]">
		<div class="solution-part-title">常用营销玩法，带动转化复购</div>
		<div class="solution-part-sub-title">
			优惠券、限时特价、消费满减等多种营销玩法，解决你的活跃、转化、复购难题
		</div>
	</div>
</div>
<div class="solution-part">
	<div class="pl-[56px] pt-[153px]">
		<div class="solution-part-title">个性化装修，轻松搭建颜值店面</div>
		<div class="solution-part-sub-title">
			风格、组件均支持灵活配置，傻瓜式拖拽即可，帮不同行业的商检搭建自己个性化的商城
		</div>
	</div>
	<RetinaBgImage
			imgSrc="{$imageBasePath}/solution-personalized-decoration.png"
			img2xSrc="{$imageBasePath}/solution-personalized-decoration@2x.png"
			alt="solution-personalized-decoration"
			classes="w-[626px] h-[553px] bg-no-repeat bg-cover bg-center"
		/>
</div>
<div class="solution-part">
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution-operational-data.png"
		img2xSrc="{$imageBasePath}/solution-operational-data.png"
		alt="solution-operational-data"
		classes="w-[629px] h-[468px] bg-no-repeat bg-cover bg-center"
	/>
	<div class="pl-[139px] pt-[153px]">
		<div class="solution-part-title">经营数据辅助决策</div>
		<div class="solution-part-sub-title">
			打通群小程序、品牌商城小程序，汇总客户消费及行为数据、订单商品等经营数据，改善商品库存周转管理以及客户精细化运营
		</div>
	</div>
</div>

